<template>
<div>
  <!-- 第一步 - 创建任务 -->
  <div class="task-container">
    <el-form ref="createForm" :model="dataForm" :rules="rules">
    <!-- 基本配置 -->
    <div class="data-show">
      <!-- 标题 -->
      <div class="data-actions">
        <h3>基本配置</h3>
      </div>
      <!-- 内容区 -->
      <div class="data-table">
        <!-- 通用布局行 -->
        <div class="common-row row-between">
          <!-- 配置项 - 任务名称 -->
          <div class="common-item item-3">
            <label class="condition-label">任务名称</label>
            <el-form-item class="condition-input" prop="name">
              <el-input :disabled="dataForm.done" type="text" placeholder="请输入任务名称" v-model="dataForm.name" />
            </el-form-item>
          </div>
          <!-- 配置项 - 平台 -->
          <div class="common-item item-3">
            <label class="condition-label">算法模块选择</label>
            <el-form-item class="condition-input" prop="system">
              <el-select :disabled="dataForm.done" v-model="dataForm.system" clearable placeholder="请选择平台">
                <el-option v-for="(item, index) in systems" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- 配置项 - 类型 -->
          <div class="common-item item-3">
            <label class="condition-label">任务类型</label>
            <el-form-item class="condition-input" prop="type">
              <el-select :disabled="dataForm.done" v-model="dataForm.type" clearable placeholder="请选择类型">
                <el-option v-for="(item, index) in types" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-- 通用布局行 -->
        <div class="common-row">
          <div class="common-item item-10">
            <label class="condition-label">任务描述</label>
            <el-form-item class="condition-input" prop="description">
              <el-input :disabled="dataForm.done" v-model="dataForm.description" maxlength="100" type="textarea" show-word-limit :rows="4" resize="none" placeholder="请输入任务描述" />
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
    <!-- 任务上传 -->
    <div class="data-show">
      <!-- 标题 -->
      <div class="data-actions">
        <h3>公钥提取</h3>
      </div>
      <!-- 内容区 -->
      <div class="data-table">
        <!-- 通用布局行 -->
        <div class="common-row row-between">
          <!-- 配置项 - 发布用户 -->
          <div class="common-item item-5">
            <label class="condition-label">发布用户</label>
            <el-form-item class="condition-input" prop="userID">
              <el-input :disabled="dataForm.done" type="text" placeholder="请输入发布用户ID" v-model="dataForm.userID" />
            </el-form-item>
          </div>
          <!-- 配置项 - 目标用户 -->
          <div class="common-item item-5">
            <label class="condition-label">目标用户</label>
            <el-form-item class="condition-input" prop="targetUserId">
              <el-input :disabled="dataForm.done" type="text" placeholder="请输入目标用户ID" v-model="dataForm.targetUserId" />
            </el-form-item>
          </div>
        </div>
        <!-- 通用布局行 -->
        <div class="common-row row-between">
          <!-- 配置项 - 算法类别 -->
          <div class="common-item item-5">
            <label class="condition-label">算法模块</label>
            <el-form-item class="condition-input" prop="keyType">
              <el-select :disabled="dataForm.done" v-model="dataForm.keyType" clearable placeholder="请选择算法">
                <el-option v-for="(item, index) in keyTypes" :label="item.label" :value="item.value" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- 配置项 - 参数文件 -->
          <div class="common-item item-5">
            <label class="condition-label">选择参数</label>
            <el-form-item class="condition-input" prop="config">
              <el-select :disabled="dataForm.done" v-model="dataForm.config" clearable placeholder="请选择参数文件">
                <el-option v-for="(item, index) in configs" :label="item.label" :value="item.value" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-- 通用布局行 - 公共密钥 -->
        <div class="common-row">
          <div class="common-item item-10" :class="{'item-upload': uploadObj.publicKeyTextFilePath.showFileList}">
            <el-tooltip content="切换上传方式" placement="top">
              <label class="condition-label condition-label-change" @click="changeUploadType('publicKeyTextFilePath', dataForm)">公共密钥</label>
            </el-tooltip>
            <el-form-item class="condition-input" prop="publicKeyTextFilePath">
              <el-upload
                v-if="uploadObj.publicKeyTextFilePath.isUploadType"
                class="upload"
                :disabled="dataForm.done"
                :ref="uploadObj.uploadRef('publicKeyTextFilePath')"
                drag
                :action="uploadObj.uploadUrl"
                :limit="1"
                :show-file-list="uploadObj.publicKeyTextFilePath.showFileList"
                :before-upload="uploadObj.beforeUpload('publicKeyTextFilePath')"
                :on-success="uploadObj.onSuccess('publicKeyTextFilePath', createForm)"
                :on-progress="uploadObj.onProgress('publicKeyTextFilePath')"
                :on-error="uploadObj.onError('publicKeyTextFilePath')"
                :on-remove="uploadObj.onRemove('publicKeyTextFilePath')"
              >
                <transition name="upload">
                  <div class="upload-empty" v-if="!dataForm.publicKeyTextFilePath">
                    <i class="iconfont icon-icon_update upload-icon"></i>
                    <p class="upload-des">拖拽文件至此或点击上传</p>
                  </div>
                  <div class="upload-content" v-else>
                    <i class="iconfont icon-daimawenjian-mian upload-icon"></i>
                    <p class="upload-des">{{ uploadObj.publicKeyTextFilePath.fileName }}</p>
                  </div>
                </transition>
              </el-upload>
              <el-input :disabled="dataForm.done" v-else type="textarea" @input="clearData('publicKeyTextFilePath', dataForm)" @change="createBlobTxt($event, 'publicKeyTextFilePath', dataForm, createForm)" v-model="uploadObj.publicKeyTextFilePath.text" show-word-limit :rows="5" resize="none" placeholder="请输入文本" />
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
    <transition name="upload">
      <!-- 底部的按钮 -->
      <div class="btn-groups" v-if="!dataForm.done">
        <button type="button" class="btn btn-normal" @click="handleCancel">取消</button>
        <button type="button" :disabled="dataForm.createFlag" class="btn" @click="handleCreate">提取公钥</button>
      </div>
      <!-- 展示提取的公钥 -->
      <div class="data-show" v-else>
        <!-- 标题 -->
        <div class="data-actions">
          <h3>公钥展示</h3>
        </div>
        <div class="data-table data-table-scroll">
          <p class="text-container">
            {{ dataForm.publicKey }}
          </p>
        </div>
      </div>
    </transition>
    </el-form>
    <!-- 第二步 - 私钥提取 -->
    <el-form ref="shareKeyForm" :model="shareKey" :rules="rules" v-if="dataForm.done">
    <div class="data-show">
      <!-- 标题 -->
      <div class="data-actions">
        <h3>私钥提取</h3>
      </div>
      <!-- 内容区 -->
      <div class="data-table">
        <!-- 通用布局行 - 任务密钥 -->
        <div class="common-row">
          <div class="common-item item-10" :class="{'item-upload': uploadObj.encryptedSharedKeyFilePath.showFileList}">
            <el-tooltip content="切换上传方式" placement="top">
              <label class="condition-label condition-label-change" @click="changeUploadType('encryptedSharedKeyFilePath', shareKey)">私钥密文</label>
            </el-tooltip>
            <el-form-item class="condition-input" prop="encryptedSharedKeyFilePath">
              <el-upload
                v-if="uploadObj.encryptedSharedKeyFilePath.isUploadType"
                class="upload"
                :disabled="shareKey.done"
                :ref="uploadObj.uploadRef('encryptedSharedKeyFilePath')"
                drag
                :action="uploadObj.uploadUrl"
                :limit="1"
                :show-file-list="uploadObj.encryptedSharedKeyFilePath.showFileList"
                :before-upload="uploadObj.beforeUpload('encryptedSharedKeyFilePath')"
                :on-success="uploadObj.onSuccess('encryptedSharedKeyFilePath', shareKeyForm)"
                :on-progress="uploadObj.onProgress('encryptedSharedKeyFilePath')"
                :on-error="uploadObj.onError('encryptedSharedKeyFilePath')"
                :on-remove="uploadObj.onRemove('encryptedSharedKeyFilePath')"
              >
                <transition name="upload">
                  <div class="upload-empty" v-if="!shareKey.encryptedSharedKeyFilePath">
                    <i class="iconfont icon-icon_update upload-icon"></i>
                    <p class="upload-des">拖拽文件至此或点击上传</p>
                  </div>
                  <div class="upload-content" v-else>
                    <i class="iconfont icon-daimawenjian-mian upload-icon"></i>
                    <p class="upload-des">{{ uploadObj.encryptedSharedKeyFilePath.fileName }}</p>
                  </div>
                </transition>
              </el-upload>
              <el-input :disabled="shareKey.done" v-else type="textarea" @input="clearData('encryptedSharedKeyFilePath', shareKey)" @change="createBlobTxt($event, 'encryptedSharedKeyFilePath', shareKey, shareKeyForm)" v-model="uploadObj.encryptedSharedKeyFilePath.text" show-word-limit :rows="5" resize="none" placeholder="请输入文本" />
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
    <transition name="upload">
      <!-- 底部的按钮 -->
      <div class="btn-groups" v-if="!shareKey.done">
        <button type="button" class="btn btn-normal" @click="handleCancel">取消</button>
        <button type="button" :disabled="shareKey.btnFlag" class="btn" @click="handleShareKey">私钥提取</button>
      </div>
      <!-- 展示提取的私钥 -->
      <div class="data-show" v-else>
        <!-- 标题 -->
        <div class="data-actions">
          <h3>私钥展示</h3>
        </div>
        <div class="data-table data-table-scroll">
          <p class="text-container">
            {{ shareKey.sharedKey }}
          </p>
        </div>
      </div>
    </transition>
    </el-form>
    <!-- 第三步 - 签名提取 -->
    <el-form ref="signForm" :model="signData" :rules="rules" v-if="shareKey.done">
      <div class="data-show">
        <!-- 标题 -->
        <div class="data-actions">
          <h3>签名提取</h3>
        </div>
        <!-- 内容区 -->
        <div class="data-table">
          <!-- 通用布局行 - 签名 -->
          <div class="common-row">
            <div class="common-item item-10" :class="{'item-upload': uploadObj.signatureFilePath.showFileList}">
              <el-tooltip content="切换上传方式" placement="top">
                <label class="condition-label condition-label-change" @click="changeUploadType  ('signatureFilePath', signData)">签名文件</label>
              </el-tooltip>
              <el-form-item class="condition-input" prop="signatureFilePath">
                <el-upload
                  v-if="uploadObj.signatureFilePath.isUploadType"
                  class="upload"
                  :disabled="signData.done"
                  :ref="uploadObj.uploadRef('signatureFilePath')"
                  drag
                  :action="uploadObj.uploadUrl"
                  :limit="1"
                  :show-file-list="uploadObj.signatureFilePath.showFileList"
                  :before-upload="uploadObj.beforeUpload('signatureFilePath')"
                  :on-success="uploadObj.onSuccess('signatureFilePath', signForm)"
                  :on-progress="uploadObj.onProgress('signatureFilePath')"
                  :on-error="uploadObj.onError('signatureFilePath')"
                  :on-remove="uploadObj.onRemove('signatureFilePath')"
                >
                  <transition name="upload">
                    <div class="upload-empty" v-if="!signData.signatureFilePath">
                      <i class="iconfont icon-icon_update upload-icon"></i>
                      <p class="upload-des">拖拽文件至此或点击上传</p>
                    </div>
                    <div class="upload-content" v-else>
                      <i class="iconfont icon-daimawenjian-mian upload-icon"></i>
                      <p class="upload-des">{{ uploadObj.signatureFilePath.fileName }}</p>
                    </div>
                  </transition>
                </el-upload>
                <el-input :disabled="signData.done" v-else type="textarea" @input="clearData('signatureFilePath', signData)" @change="createBlobTxt($event, 'signatureFilePath', signData, signForm)" v-model="uploadObj.signatureFilePath.text" show-word-limit :rows="5" resize="none" placeholder="请输入文本" />
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
      <transition name="upload">
        <!-- 底部的按钮 -->
        <div class="btn-groups" v-if="!signData.done">
          <button type="button" class="btn btn-normal" @click="handleCancel">取消</button>
          <button type="button" :disabled="signData.btnFlag" class="btn" @click="handleSign">签名提取</button>
        </div>
        <!-- 展示提取的私钥 -->
        <div class="data-show" v-else>
          <!-- 标题 -->
          <div class="data-actions">
            <h3>签名提取展示</h3>
          </div>
          <div class="data-table data-table-scroll">
            <p class="text-container">
              {{ signData.verifyResult }}
            </p>
          </div>
        </div>
      </transition>
    </el-form>
  </div>
</div>
</template>
<script setup>
import { ref, onActivated } from 'vue';
import { API } from '@/utils/status.js';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import * as rule from '@/utils/rules';
import * as request from '@/api/steganography';
import * as uploadApi from '@/api/file';
import useAppStore from '@/stores/app';

const appStore = useAppStore();
const router = useRouter();
const route = useRoute();

const systems = API.steganography.systems;
const types = [
  { value: 0, label: '类型1' },
  { value: 1, label: '类型2' }
];
const configs = [
  { value: 'config1', label: '参数文件1' },
  { value: 'config2', label: '参数文件2' }
];
const keyTypes = API.publicSteg.keyTypes;
const defaultDataObj = {
  done: false,
  createFlag: false,
  name: '',
  description: '',
  system: null,
  type: null,
  userID: null,
  targetUserId: null,
  keyType: null,
  config: null,
  // 公钥提取文件路径
  publicKeyTextFilePath: null,
  // 提取的公钥
  publicKey: null
};
const defaultShareKeyObj = {
  done: false,
  btnFlag: false,
  // 私钥提取文件路径
  encryptedSharedKeyFilePath: null,
  // 私钥密文
  sharedKey: null
};
const defaultSignObj = {
  done: false,
  btnFlag: false,
  signatureFilePath: null,
  verifyResult: null
};
const defaultUpload = {
  isUploadType: true,
  text: '',
  dom: null,
  showFileList: false,
  fileName: '',
  uploading: false
};

// ========> data <========
// 第一步表单dom
const createForm = ref(null);
// 第二步表单dom
const shareKeyForm = ref(null);
// 第三部表单dom
const signForm = ref(null);
// 绑定表单对象
const dataForm = ref({
  id: null,
  done: false,
  createFlag: false,
  name: '',
  description: '',
  system: null,
  type: null,
  userID: null,
  targetUserId: null,
  keyType: null,
  config: null,
  // 公钥提取文件路径
  publicKeyTextFilePath: null,
  // 提取的公钥
  publicKey: null
});
const shareKey = ref({
  done: false,
  btnFlag: false,
  // 私钥提取文件路径
  encryptedSharedKeyFilePath: null,
  // 私钥密文
  sharedKey: null
});
const signData = ref({
  done: false,
  btnFlag: false,
  signatureFilePath: null,
  verifyResult: null
})


// 上传控制对象
const uploadObj = ref({
  uploadUrl: `${import.meta.env.VITE_FILE_BASE_API}${uploadApi.uploadUrl}`,
  uploadRef(key){
    return function (dom){
      if (dom){
        uploadObj.value[key].dom = dom;
      }
    }
  },
  beforeUpload(key){
    return function (file){
      if (uploadObj.value[key].uploading){
        ElMessage.warning('当前有文件正在上传，请稍后重试');
        return false;
      }
      let extension = file.size < API.upload.commonLimit;
      if (!extension) {
        ElMessage.warning(`上传文件超过大小限制，文件须小于${API.upload.commonLimit / (1024 * 1024)}M`)
      }
      let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
      extension = fileType == 'json' ? true : false;
      if (!extension) {
        ElMessage.warning('上传文件须为.json文件!');
      }
      uploadObj.value[key].fileName = extension ? file.name : '';
      uploadObj.value[key].showFileList = true;
      return extension;
    }
  },
  onSuccess(key, form){
    return function (e){
      uploadObj.value[key].dom.clearFiles();
      uploadObj.value[key].showFileList = false;
      uploadObj.value[key].uploading = false;
      if (e.code === API.code.SUCCESS && key !== 'encryptedSharedKeyFilePath' && key !== 'signatureFilePath') { 
        ElMessage.success('上传成功');
        dataForm.value[key] = e.data.path;
      } else if (e.code === API.code.SUCCESS && key == 'encryptedSharedKeyFilePath'){
        ElMessage.success('上传成功');
        shareKey.value.encryptedSharedKeyFilePath = e.data.path;
      } else if (e.code === API.code.SUCCESS && key == 'signatureFilePath'){
        ElMessage.success('上传成功');
        signData.value.signatureFilePath = e.data.path;
      } else {
        let msg = e.msg || e.message || '上传失败，请稍后重试或联系管理员';
        ElMessage({
          type: 'error',
          duration: 1500,
          message: msg
        });
      }
      form.validateField([key])
    }
  },
  onProgress(key){
    return function (e){
      uploadObj.value[key].showFileList = true;
      uploadObj.value[key].uploading = true;
    }
  },
  onError(key){
    return function (e){
      let message = e.msg || e.message || '上传失败，请稍后重试或联系管理员'
      ElMessage({
        type: 'error',
        duration: 1500,
        message
      });
      uploadObj.value[key].showFileList = false;
      uploadObj.value[key].uploading = false;
      uploadObj.value[key].dom.clearFiles();
      uploadObj.value[key].fileName = '';
    }
  },
  onRemove(key){
    return function (e){
      uploadObj.value[key].showFileList = false;
      uploadObj.value[key].uploading = false;
      uploadObj.value[key].dom.clearFiles();
      uploadObj.value[key].fileName = '';
    }
  },
  publicKeyTextFilePath: {
    isUploadType: true,
    text: '',
    dom: null,
    showFileList: false,
    fileName: '',
    uploading: false
  },
  encryptedSharedKeyFilePath: {
    isUploadType: true,
    text: '',
    dom: null,
    showFileList: false,
    fileName: '',
    uploading: false
  },
  signatureFilePath: {
    isUploadType: true,
    text: '',
    dom: null,
    showFileList: false,
    fileName: '',
    uploading: false
  }
});
// 表单验证规则
const rules = {
  name: rule.taskNameRules,
  userID: rule.createRequired('用户不能为空'),
  targetUserId: rule.createRequired('用户不能为空'),
  keyType: rule.createRequired('算法不能为空'),
  // publicKeyTextFilePath: rule.createRequired('公钥密文不能为空'),
  publicKeyTextFilePath: rule.createTextUpload(uploadObj.value, 'publicKeyTextFilePath', '公钥密文不能为空'),
  // encryptedSharedKeyFilePath: rule.createRequired('私钥密文不能为空'),
  encryptedSharedKeyFilePath: rule.createTextUpload(uploadObj.value, 'encryptedSharedKeyFilePath', '私钥密文不能为空'),
  // signatureFilePath: rule.createRequired('签名文件不能为空')
  signatureFilePath: rule.createTextUpload(uploadObj.value, 'signatureFilePath', '签名文件不能为空')
};

// ========> hooks <========
onActivated(() => {
  let { id, isCreate, reenter } = route.query;
  if (reenter || (id !== undefined && id == dataForm.value.id)){
    return;
  }
  if (isCreate){
    init();
    return;
  }
  reInit();
});

// ========> methods <========
function init(){
  dataForm.value = Object.assign({}, defaultDataObj);
  shareKey.value = Object.assign({}, defaultShareKeyObj);
  signData.value = Object.assign({}, defaultSignObj);
  uploadObj.value.publicKeyTextFilePath = Object.assign({}, defaultUpload);
  uploadObj.value.encryptedSharedKeyFilePath = Object.assign({}, defaultUpload);
  uploadObj.value.signatureFilePath = Object.assign({}, defaultUpload);
}
function reInit(){
  let {id} = route.query;
  init();
  request.getTaskDetailById({id})
    .then(res => {
      let result = res;
      result.infoData = JSON.parse(res.infoData);
      console.log(result);
      /*
done: false,
  btnFlag: false,
  signatureFilePath: null,
  verifyResult: null
      */
      dataForm.value.id = result.id;
      dataForm.value.createFlag = false;
      dataForm.value.name = result.name;
      dataForm.value.description = result.description;
      dataForm.value.userID = result.infoData.userID;
      dataForm.value.targetUserId = result.infoData.targetUserId;
      dataForm.value.keyType = result.infoData.keyType;
      dataForm.value.config = result.infoData.config;
      if (result.infoData.publicKey){
        dataForm.value.done = true;
        dataForm.value.publicKeyTextFilePath = result.infoData.publicKeyTextFilePath;
        dataForm.value.publicKey = result.infoData.publicKey;
        uploadObj.value.publicKeyTextFilePath.fileName = 'publicKeyText.json';
        uploadObj.value.publicKeyTextFilePath.text = result.infoData.publickKeyText;
      }
      if (result.infoData.sharedKey){
        shareKey.value.done = true;
        shareKey.value.btnFlag = false;
        shareKey.value.encryptedSharedKeyFilePath = result.infoData.encryptedSharedKeyFilePath;
        shareKey.value.sharedKey = result.infoData.sharedKey;
        uploadObj.value.encryptedSharedKeyFilePath.fileName = 'encryptedSharedKey.json';
        uploadObj.value.encryptedSharedKeyFilePath.text = result.infoData.encryptedSharedKeyText;
      }
      if (result.infoData.verifyResult){
        signData.value.done = true;
        signData.value.btnFlag = false;
        signData.value.signatureFilePath = result.infoData.signatureFilePath;
        signData.value.verifyResult = result.infoData.verifyResult;
        uploadObj.value.signatureFilePath.fileName = 'signature.json';
        // todo - 第三部上传时回显的文字输入赋值什么字段？
        // uploadObj.value.signatureFilePath.text = result.infoData.signatureText;??
      }
    })
    .catch(err => {
      console.log(err)
      ElMessage.error('初始化错误')
    })
}
// 上传项切换文本 / 上传
function changeUploadType(key, data){
  // uploadObj.value[key].isUploadType = !uploadObj.value[key].isUploadType;
  // if (data.done){
  //   return;
  // }
  // uploadObj.value[key].text = '';
  // data[key] = null;
  if (data.done){
    return;
  }
  uploadObj.value[key].isUploadType = !uploadObj.value[key].isUploadType;
  uploadObj.value[key].text = '';
  uploadObj.value[key].showFileList = false;
  uploadObj.value[key].fileName = '';
  uploadObj.value[key].uploading = false;
  data[key] = null;
}
function clearData(key, data){
  data[key] = '';
}
// 上传项文本输入事件
function createBlobTxt(e, key, data, form){
  if (!e){
    data[key] = null;
    ElMessage.success('上传成功');
    return;
  }
  const blob = new Blob([e], { type: 'application/json'});
  let filename;
  switch (key){
    case 'publicKeyTextFilePath':
      filename = 'publicKeyText.json';
      break;
    case 'encryptedSharedKeyFilePath':
      filename = 'encryptedSharedKeyText.json';
      break;
    case 'signatureFilePath':
      filename = 'signature.json';
      break;
  }
  const file = new File([blob], filename, { type: 'application/json'});
  let formData = new FormData();
  formData.append('file', file);
  uploadApi.upload(formData)
    .then(res => {
      console.log(res);
      ElMessage.success('上传成功');
      data[key] = res.path;
      uploadObj.value[key].fileName = filename;
      form.validateField([key]);
    })
    .catch(err => {
      console.log(err);
      let msg = err.msg || err.message || '上传失败，请稍后重试或联系管理员';
      ElMessage.error(msg);
      form.validateField([key]);
    })
}
// 第一步 - 创建任务提取公钥
function handleCreate(){
  if (dataForm.value.createFlag){
    ElMessage.warning('当前正在执行提取公钥，请稍后');
    return;
  }
  createForm.value.validate(valid => {
    if (valid){
      dataForm.value.createFlag = true;
      appStore.openLoading('提取公钥中...');
      request.publicExtractPublicKey({
        name: dataForm.value.name,
        moduleType: API.steganography.moduleType.THREE,
        taskType: API.steganography.type.EXTRACT,
        description: dataForm.value.description,
        infoData: {
          targetUserId: dataForm.value.targetUserId,
          userID: dataForm.value.userID,
          keyType: dataForm.value.keyType,
          config: dataForm.value.config,
          publicKeyTextFilePath: dataForm.value.publicKeyTextFilePath
        }
      })
        .then(res => {
          console.log(res)
          dataForm.value.createFlag = false;
          appStore.closeLoading();
          if (res && res.infoData && res.infoData.publicKey){
            ElMessage.success('公钥提取成功');
            dataForm.value.id = res.id;
            dataForm.value.publicKey = res.infoData.publicKey;
            dataForm.value.done = true;
            console.log(res);
          } else {
            ElMessage.error('提取公钥密文失败，请稍后重试或联系管理员');
          }
        })
        .catch(err => {
          dataForm.value.createFlag = false;
          appStore.closeLoading();
        })
    } else {
      ElMessage.warning('填写信息有误，请核对后提交');
    }
  })
}
// 第二步 - 点击私钥提取按钮
function handleShareKey(){
  if (shareKey.value.btnFlag){
    ElMessage.warning('当前正在进行私钥提取，请稍后');
    return;
  }
  shareKeyForm.value.validate(valid => {
    if (valid){
      shareKey.value.btnFlag = true;
      appStore.openLoading('私钥提取中...');
      request.publicExtractShareKey({
        id: dataForm.value.id,
        name: dataForm.value.name,
        moduleType: API.steganography.moduleType.THREE,
        taskType: API.steganography.type.EXTRACT,
        description: dataForm.value.description,
        infoData: {
          targetUserId: dataForm.value.targetUserId,
          userID: dataForm.value.userID,
          keyType: dataForm.value.keyType,
          config: dataForm.value.config,
          publicKeyTextFilePath: dataForm.value.publicKeyTextFilePath,
          encryptedSharedKeyFilePath: shareKey.value.encryptedSharedKeyFilePath
        }
      })
        .then(res => {
          shareKey.value.btnFlag = false;
          appStore.closeLoading();
          if (res && res.infoData && res.infoData.sharedKey){
            ElMessage.success('私钥提取成功');
            shareKey.value.sharedKey = res.infoData.sharedKey;
            shareKey.value.done = true;
            console.log(res);
          } else {
            ElMessage.error('提取公钥密文失败，请稍后重试或联系管理员');
          }
        })
        .catch(err => {
          shareKey.value.btnFlag = false;
          appStore.closeLoading();
        })
    } else {
      ElMessage.warning('填写信息有误，请核对后提交');
    }
  })
}
// 第三步 - 签名提取
function handleSign(){
  if (signData.value.btnFlag){
    ElMessage.warning('当前正在进行签名提取，请稍后');
    return;
  }
  signForm.value.validate(valid => {
    if (valid){
      signData.value.btnFlag = true;
      appStore.openLoading('签名提取中...');
      request.publicExtractSign({
        id: dataForm.value.id,
        name: dataForm.value.name,
        moduleType: API.steganography.moduleType.THREE,
        taskType: API.steganography.type.EXTRACT,
        description: dataForm.value.description,
        infoData: {
          targetUserId: dataForm.value.targetUserId,
          userID: dataForm.value.userID,
          keyType: dataForm.value.keyType,
          config: dataForm.value.config,
          publicKeyTextFilePath: dataForm.value.publicKeyTextFilePath,
          encryptedSharedKeyFilePath: shareKey.value.encryptedSharedKeyFilePath,
          signatureFilePath: signData.value.signatureFilePath
        }
      })
        .then(res => {
          signData.value.btnFlag = false;
          appStore.closeLoading();
          if (res && res.infoData && res.infoData.verifyResult){
            ElMessage.success('签名提取成功');
            signData.value.verifyResult = res.infoData.verifyResult;
            signData.value.done = true;
            console.log(res);
          } else {
            ElMessage.error('签名提取失败，请稍后重试或联系管理员');
          }
        })
        .catch(err => {
          console.log(err);
          signData.value.btnFlag = false;
          appStore.closeLoading();
        })
    } else {
      ElMessage.warning('填写信息有误，请核对后提交');
    }
  })
}
// 点击取消按钮
function handleCancel(){
  router.back()
}

</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
.row-between {
  justify-content: space-between;
}
.item-3 {
  width: 30%
}
.item-10 {
  width: 100%;
  height: auto;
  padding: 10px 0;
  .condition-label {
    width: 15%;
  }
  .condition-input {
    width: 80%;
  }
}
.item-10-spe {
  width: 100%;
  .condition-label {
    width: 15%;
  }
  .condition-input {
    width: 80%;
  }
  &::v-deep .el-form-item__content {
    align-items: center!important;
  }
}
.item-5 {
  width: 49%;
  // height: auto;
  // padding: 50px 0 60px 0;
}
.upload {
  width: 100%;
  min-height: 120px;
  height: 120px;
  &::v-deep .el-upload {
    @include wh-100;
    // height: 100%!important;
    .el-upload-dragger {
      @include wh-100;
      border-color: var(--color-main);
      padding: 0;
      .upload-empty {
        @include wh-100;
        @include flex-all-center;
        flex-direction: column;
        .upload-icon {
          font-size: 30px;
          color: var(--color-gray-10);
        }
        .upload-des {
          color: var(--color-gray-10);
        }
      }
      .upload-content {
        @include wh-100;
        @include flex-all-center;
        flex-direction: column;
        .upload-icon {
          font-size: 30px;
          color: var(--color-main);
        }
        .upload-des {
          color: var(--color-main);
        }
      }
    }
  }
}
.btn-groups {
  margin-top: 20px;
  text-align: center;
  .btn {
    margin: 0 20px;
  }
}
.condition-label-change {
  cursor: pointer;
}
.condition-label-change:hover {
  color: var(--color-primary);
}
.data-table-scroll {
  max-height: 220px;
  height: auto;
  overflow-y: auto;
  @include scrollBar;
}
.item-upload {
  padding-bottom: 50px;
}
</style>